<!--客户信息-->
<template>
  <div class="app-container erha-content">
    <div class="erha-header">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryForm.name" clearable placeholder="客户名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryTable">查询</el-button>
          <el-button type="primary" @click="openDialog(null, true)">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="erha-body">
      <el-table
        :data="table.data"
        height="600"
        style="width: 100%;"
      >
        <el-table-column prop="name" label="客户名称" min-width="180" />
        <el-table-column prop="code" label="投保申请编号" min-width="180" />
        <el-table-column prop="principalAmount" label="投保贷款本金金额" min-width="180" />
        <el-table-column prop="approvedAmount" label="最终审批金额" min-width="180" />
        <el-table-column prop="status" label="状态" min-width="180">
          <template v-slot="{row}">
            <el-tag v-if="!row.status" effect="dark" type="info">未审批</el-tag>
            <el-tag v-else-if="row.status === '通过'" effect="dark" type="success">通过</el-tag>
            <el-tag v-else-if="row.status === '未通过'" effect="dark" type="info">未通过</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="130">
          <template v-slot="{row}">
            <template v-if="!row.status">
              <el-button type="text" @click="approve(row)">审批</el-button>
              <el-button type="text" @click="openDialog(row, true)">编辑</el-button>
              <el-button type="text" @click="deleteInfo({id: row.id})">删除</el-button>
            </template>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!--新增/编辑弹窗-->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialog.title"
      :visible.sync="dialog.show"
      width="800px"
    >
      <el-form ref="form" :model="dialog.form" label-width="120px">
        <el-form-item label="客户名称">
          <el-input v-model="dialog.form.name" class="width-90" clearable placeholder="客户名称" />
        </el-form-item>

        <el-form-item label="投保申请编号">
          <el-input v-model="dialog.form.code" class="width-90" clearable placeholder="投保申请编号" />
        </el-form-item>

        <el-form-item label="最终审批金额">
          <el-input v-model="dialog.form.principalAmount" class="width-90" clearable placeholder="最终审批金额" />
        </el-form-item>

        <el-form-item label="最终审批金额">
          <el-input v-model="dialog.form.approvedAmount" class="width-90" clearable placeholder="最终审批金额" />
        </el-form-item>
      </el-form>

      <div v-if="dialog.editSwitch" slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { queryList, saveInfo, deleteInfo } from '@/api/projectApproval'

export default {
  name: 'CustomerInfo',
  data() {
    return {
      queryForm: {},

      table: {
        data: [],
        loading: false
      },

      dialog: {
        title: '添加客户信息',
        loading: false,
        show: false,
        form: {},
        editSwitch: true
      }

    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.queryTable()
    },

    queryTable() {
      const params = Object.assign({}, this.queryForm)
      this.queryList(params)
    },

    openDialog(row, editSwitch = true) {
      this.dialog.title = row ? '编辑' : '新增'
      this.dialog.editSwitch = editSwitch
      this.dialog.show = true
      this.dialog.form = Object.assign({}, row || {})
    },

    submit() {
      const params = Object.assign({}, this.dialog.form)
      this.saveInfo(params)
    },

    deleteInfo(params) {
      this.$confirm(`确定删除？`, '删除', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async() => {
          await deleteInfo(params)
          this.$message.success('操作成功！')
          this.queryTable()
        })
        .catch(action => {

        })
    },

    approve(row) {
      this.$confirm(`是否通过审核？`, '审核', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通过',
        cancelButtonText: '不通过'
      })
        .then(() => {
          const params = Object.assign({}, row)
          params.status = '通过'
          this.saveInfo(params)
        })
        .catch(action => {
          if (action === 'cancel') {
            const params = Object.assign({}, row)
            params.status = '不通过'
            this.saveInfo(params)
          }
        })
    },

    async saveInfo(params) {
      await saveInfo(params)
      this.$message.success('操作成功！')
      this.dialog.show = false
      this.queryTable()
    },

    async queryList(params) {
      this.table.data = []
      const res = await queryList(params)
      this.table.data = res || []
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.width-90 {
  width: 90%;
}

::v-deep .el-scrollbar__wrap {
  overflow: scroll;
  overflow-x: hidden !important;
  height: 100%;
}
</style>
